<template>
  <div class="container">
    <card title="数据分析">
      <div class="search-head">
        <div class="block">
          <span class="demonstration">APP：</span>
          <el-select v-model="source_app" filterable placeholder="请选择">
            <el-option
              v-for="item in apps"
              :key="item.source_app"
              :label="item.app_name"
              :value="item.source_app">
            </el-option>
          </el-select>
        </div>
        <div class="block">
          <span class="demonstration">时间：</span>
          <el-date-picker
            v-model="time"
            type="daterange"
            :clearable="false"
            :picker-options="pickerOptions"
            placeholder="选择日期范围">
          </el-date-picker>
        </div>
        <div>
          <button class="button is-primary" :class="{'is-loading': isExporting}" @click="exportIdfa">导出IDFA</button>
        </div>
      </div>
    </card>
    <chart v-for="item in types" :param="param" :apps="apps" :title="item.title" :total="item.total" :ylabel="item.ylabel" :type="item.type" :key="item.type"></chart>
  </div>
</template>

<script>
import Chart from '@/components/Chart'
export default {
  name: 'analysis',
  components: {
    Chart
  },
  computed: {
    time: { // 时间控件里的值
      get () {
        return [this.startTime, this.endTime]
      },
      set (val) {
        if (val === '' || val.length !== 2) return
        this.startTime = this.$dateFormat('yyyy-MM-dd', new Date(val[0]))
        this.endTime = this.$dateFormat('yyyy-MM-dd', new Date(val[1]))
        // this.getData()
      }
    },
    param () {
      return {
        source_app: this.source_app,
        start_date: this.startTime,
        end_date: this.endTime
      }
    }
  },
  created () {
    this.$api.get('assistant/opening').then(req => {
      this.apps = req || []
      if (this.apps.length > 0) {
        this.source_app = this.apps[0].source_app
        // this.getData()
      }
    })
  },
  data () {
    let startTime = this.$dateFormat('yyyy-MM', new Date()) + '-01'
    let endTime = this.$dateFormat('yyyy-MM-dd', new Date())
    return {
      isExporting: false,
      isLoading: false,
      startTime,
      endTime,
      source_app: '',
      apps: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now()
        }
      },
      types: [
        {
          type: 'register',
          title: '注册用户分析',
          total: '总注册用户数',
          ylabel: '注册用户数'
        }, {
          type: 'new_users',
          title: '新增用户分析',
          total: '总新增用户数',
          ylabel: '新增用户数'
        }, {
          type: 'active_users',
          title: '活跃用户分析',
          total: '总活跃用户数',
          ylabel: '活跃用户数'
        }, {
          type: 'try_users',
          title: '掉钱眼儿用户分析',
          total: '总掉钱眼儿用户数',
          ylabel: '掉钱眼儿用户数'
        }
      ]
    }
  },
  methods: {
    exportIdfa () {
      this.isExporting = true
      this.$api.download(`statistics/export_idfa`, this.param, 'idfa.csv').then(() => {
        this.isExporting = false
      }).catch(() => {
        this.isExporting = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-head{
  display: flex;
  padding: 10px 20px;
  & > div:not(:last-child) {
    margin-right: 10px;
  }
}
</style>

